<template>
  <div class="tit-box">
    <nav-bar class="tit-nav">
      <div slot="middle">个税计算</div>
      <img class="top-back-icon" src="@res/img/common_back.png" alt="" slot="left" @click="back">
    </nav-bar>

    <!--顶部分界线-->

    <div class="tit-content">
      <input-item>
        <p slot="name">税前工资</p>
        <input class="tit-input" id="preTax" name="preTax" type="number" slot="input" v-model="preTax"
               @input="preTax=$_numberUtil.checkPosNumber(preTax)">
        <p slot="right">元</p>
      </input-item>
      <input-item>
        <p slot="name">本人社保基数</p>
        <input class="tit-input" id="baseMoney" name="baseMoney" type="number" slot="input" v-model="baseMoney"
               @input="baseMoney=$_numberUtil.checkPosNumber(baseMoney)">
        <p slot="right">元</p>
      </input-item>
      <input-item>
        <p slot="name">专项附加扣除</p>
        <input class="tit-input" id="special" name="special" type="number" slot="input" v-model="special"
               @input="special=$_numberUtil.checkPosNumber(special)">
        <p slot="right">元</p>
      </input-item>
      <input-item :show-div="false">
        <p slot="name">社保项目</p>
      </input-item>


      <social-security ref="social"/>
    </div>

    <!--提交分界线-->
    <div style="height: 1rem"></div>
    <submit-button class="i-submit" @submit="submit" tip="开始计算"></submit-button>

  </div>
</template>

<script>
  /*
  * 导入组件
  * */
  import NavBar from "@/components/common/NavBar";
  import InputItem from "@/components/common/InputItem";
  import SubmitButton from "@/components/common/SubmitButton";
  import SocialSecurity from "@/components/tax/SocialSecurity";

  export default {
    name: "TaxInput",
    data() {
      return {
        preTax: 0,
        baseMoney: 0,
        special: 0,
        yanglao: 0.0,
        yanglaoB: 0.0,
        gongjijin: 0.0,
        gongjijinB: 0.0,
        yiliao: 0.0,
        yiliaoB: 0.0,
        gongshang: 0.0,
        gongshangB: 0.0,
        shengyu: 0.0,
        shengyuB: 0.0,
        shiye: 0.0,
        shiyeB: 0.0,


      }
    },
    components: {
      NavBar,
      InputItem,
      SubmitButton,
      SocialSecurity,
    },
    methods: {
      back() {
        history.go(-1)
      },
      submit() {
        let preTax = parseFloat(this.preTax)
        let baseMoney = parseFloat(this.baseMoney)
        let special = parseFloat(this.special)
        let tip = ''
        if (isNaN(preTax)||preTax<100||preTax>1000000) {
          tip = '税前工资输入有问题，请检查'
        }
        if (isNaN(baseMoney)||baseMoney<100) {
          tip = '社保基数输入有问题，请检查'
        }
        if (isNaN(special)) {
          tip = '专项扣除输入有问题，请检查'
        }
        if (baseMoney > 40000) {
          tip = '社保基数超过了正常范围'
        }
        if (tip.length > 1) {
          this.$createToast({
            time: 2000,
            type: 'text',
            txt: tip,
          }).show()
          return
        }
        let t = this.$refs.social.calculate()
        if(t.length<1) return
        this.$router.push({
          name: "tax_result",
          params: {
            preTax,
            baseMoney,
            special,
            social: t
          }
        })
      },
    },
    created() {
      console.log('created', this.$route.path);
    },
    activated() {
      console.log('activated', this.$route.path);
    }
  }
</script>

<style scoped>
  .tit-box {
    background-color: var(--color-bg-gray);
    height: 100%;
  }

  .tit-back-icon {
    width: 2rem;
    width: 2rem;
  }

  .tit-input {
    text-align: right;
    border: none;
    width: 100%;

  }

</style>
